<template>
  <div class="login-page">
    <div class="login-container">
      <div class="title">登录/注册</div>
      <!-- 添加表单 -->
      <van-field v-model="username" placeholder="用户名" clearable />
      <van-field
        v-model="password"
        type="password"
        placeholder="密码"
        clearable
      />
      <van-button type="primary" color="#e0f2f1" @click="handleLogin">
        登录
      </van-button>
      <van-button @click="handleRegister"> 注册 </van-button>
    </div>
  </div>
</template>

<script setup>
import { login, register } from "../api/user";

import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore()
const router = useRouter();
const username = ref("");
const password = ref("");

const handleLogin = async () => {
  const res = await login({
    username: username.value,
    password: password.value,
  });
  console.log(res);
  showNotify({
    type: res.success ? "success" : "danger",
    message: res.message,
  });
  if (res.success) {
    window.localStorage.setItem("user", JSON.stringify(res.data));
    store.commit("SET_USERINFO", res.data)
    router.push({ path: "/home" });
  }
};

const handleRegister = async () => {
  const res = await register({
    username: username.value,
    password: password.value,
  });
  console.log(res);
  showNotify({
    type: res.success ? "success" : "danger",
    message: res.message,
  });
  if (res.success) {
  }
  // 注册逻辑
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e0f2f1;
}

.login-container {
  width: 90%;
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.van-button {
  margin-top: 15px;
}
</style>
